<script setup lang="ts">
import { useRoute } from 'vue-router'
import { onMounted, reactive } from 'vue'
import { downloadCode, tableView } from '@/api/system/generator/table'
import * as monaco from 'monaco-editor'
import type { Result } from '@/tools/request'
import type { GeneratorFile } from '@/api/system/generator/generator'
import { Message } from '@arco-design/web-vue'

const query = useRoute().query

const preview = reactive({
  files: [] as GeneratorFile[],
  editors: [] as any,
  loadList: () => {
    //@ts-ignore
    tableView(query).then((resp: Result<any>) => {
      preview.files = resp.data
      for (let i = 0; i < resp.data.length; i++) {
        const t = setTimeout(() => {
          initEditor(i)
          clearTimeout(t)
        }, 10)
      }
    })
  }
})

onMounted(() => {
  preview.loadList()
})


//初始化代码编辑器
const initEditor = (index: number) => {
  const element = document.getElementById(`preview${index}`)
  const editor = monaco.editor.create(element!, {
    value: preview.files[index].content!,
    language: preview.files[index].language!,
    theme: 'vs-dark',
    readOnly: true,
    automaticLayout: true
  })
  preview.editors.push({ editor: editor, getValue: () => editor.getValue() })
}

//全屏
const fullScreen = (id: number) => {
  const element = preview.editors[id].editor.getContainerDomNode()
  element.requestFullscreen()
}


//复制
const copy = (id: number) => {
  const content = preview.editors[id].getValue()
  navigator.clipboard.writeText(content)
  Message.success('复制成功！')
}
</script>

<template>
  <a-breadcrumb class="my-3">
    <a-breadcrumb-item>系统工具</a-breadcrumb-item>
    <RouterLink to="/generator">
      <a-breadcrumb-item>代码生成</a-breadcrumb-item>
    </RouterLink>
    <a-breadcrumb-item>代码预览</a-breadcrumb-item>
  </a-breadcrumb>
  <a-layout-content>
    <a-card>
      <template #title>
        代码预览
      </template>

      <div class="my-3">
        <a-button type="primary" @click="downloadCode(query)">
          <template #icon>
            <IconDownload />
          </template>
          下载代码
        </a-button>
      </div>

      <div
        v-for="(v,i) in preview.files"
        :key="i"
        class="my-3"
      >
        <a-row :gutter="20">
          <a-col :span="6">
            <a-form-item
              label="文件名"
              hide-asterisk
            >
              <a-input v-model="v.fileName" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-select default-value="go" v-model="v.language" allow-create allow-search
                      placeholder="编辑器语言" style="width: 250px"
                      disabled
            >
              <a-option :label="v.language" :value="v.language"></a-option>
            </a-select>
          </a-col>
          <a-col>
            <div class="d-flex bg-success-subtle  position-relative" style="height: 400px">
              <div :id="`preview${i}`" class="w-100 h-100">
              </div>
              <a-space class="position-absolute " style="right: 10px;bottom: 10px;z-index: 9999">
                <a-button shape="circle"
                          @click="copy(i)">
                  <template #icon>
                    <IconCopy />
                  </template>
                </a-button>
                <a-button type="primary"
                          shape="circle"
                          @click="fullScreen(i)">
                  <template #icon>
                    <IconExpand />
                  </template>
                </a-button>
              </a-space>
            </div>
          </a-col>
        </a-row>
      </div>

    </a-card>
  </a-layout-content>
</template>

<style scoped lang="scss">

</style>
